<template>
<div >
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <h2>修改</h2>
    <a-form-item label="作者">
      <a-input v-decorator="['author']" />
    </a-form-item>
    <a-form-item label="文章标题">
      <a-input
        v-decorator="[
          'title',
        ]"
        
      />
    </a-form-item>
    <a-form-item label="文章描述">
      <a-textarea
        v-decorator="['desc']"
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="封面图片">
      <a-upload
        name="file"
        :multiple="true"
        action="/api/upload"
        :headers="headers"
        @change="handleChange"
      >
        <a-button> <a-icon type="upload" /> 请上传 </a-button>
      </a-upload>
    </a-form-item>
    <a-form-item label="文章详情">
      <div id="content"></div>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 18, offset: 9 }">
      <a-button type="primary" html-type="submit"> 提交 </a-button>
      <a-button type="primary" @click="chongz"> 重置 </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
import E from "wangeditor";
import { getArt } from "@api";
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      previewVisible: false,
      previewImage: "",
      fileList: [],
      headers: {
        authorization: "authorization-text",
      },
      id: this.$route.params.id,
      art:{}
    };
  },
  created() {
    this.getArt()
    
  },
  methods: {
    
    getArt() {
      getArt(this.id).then((res) => {
       if(res.data.code===200){
         
        this.art=res.data.data
         this.form.setFieldsValue(this.art)
         console.log(this.art);
          this.init();
       }
      });

    },
    handleChange(info) {
      if (info.file.status !== "uploading") {
      }
      if (info.file.status === "done") {
        this.thumb = info.file.response.data.filePath;
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },

    chongz() {
      this.$router.go(0);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
            console.log(values);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },

    init() {
        console.log(this.art);
        const editor = new E("#content");
       editor.create();
        editor.txt.html(this.art.cintent);
        this.art.editor=editor
    },
  },
  mounted() {
  

  },
};
</script>

<style lang="scess" scoped>
</style>